<template>
	<view class="uni_box home">
		<navbar title='支付成功'>
		</navbar>
		<view class="content">
			<image class="img_cg" src="@/pages_admin/static/img_cg.png" mode="" />
			<text class="jname">支付成功</text>
			<!-- <view class="ohead">
				<view class="yijie">已接单</view>
				<image class="icon_jf" src="@/pages_admin/static/icon_jf.png" />
				<view class="yinav">
					<text class="name">詹三</text>
					<view class="jienav">
						<view class="bq">男</view>
						<view class="bq">33岁</view>
						<view class="bq sxiao">
							<image class="icon_bz_s" src="@/pages_admin/static/icon_bz_s.png" />
							<text class="bname">保险待生效</text>
							<image class="icon_ck_s" src="@/pages_admin/static/icon_ck_s.png" />
						</view>
					</view>
				</view>
			</view> -->
			<view class="bqview">
				<view class="phead">
					<text class="bqtit">您下次是否还愿意录用该员工？</text>
					<!-- <text class="tipj" @click="getpjia">提交评分</text> -->
				</view>
				<view class="bqitems">
					<view class="items" @click="getpfen(1)">
						<image class="bqone" v-if="score==1" src="@/pages_admin/static/bq/bqones.png" />
						<image class="bqone" v-else src="@/pages_admin/static/bq/bqone.png" />
						<text>不满意</text>
					</view>
					<view class="items" @click="getpfen(2)">
						<image class="bqone" v-if="score==2" src="@/pages_admin/static/bq/bqtwos.png" />
						<image class="bqone" v-else src="@/pages_admin/static/bq/bqtwo.png" />
						<text>不想</text>
					</view>
					<view class="items" @click="getpfen(3)">
						<image class="bqone" v-if="score==3" src="@/pages_admin/static/bq/bqthrees.png" />
						<image class="bqone" v-else src="@/pages_admin/static/bq/bqthree.png" />
						<text>看情况</text>
					</view>
					<view class="items" @click="getpfen(4)">
						<image class="bqone" v-if="score==4" src="@/pages_admin/static/bq/bqfours.png" />
						<image class="bqone" v-else src="@/pages_admin/static/bq/bqfour.png" />
						<text>愿意</text>
					</view>
					<view class="items" @click="getpfen(5)">
						<image class="bqone" v-if="score==5" src="@/pages_admin/static/bq/bqfives.png" />
						<image class="bqone" v-else src="@/pages_admin/static/bq/bqfive.png" />
						<text>一定</text>
					</view>
				</view>
			 </view>
			<view class="zshou" @click="getpjia">t提交评价</view>
			<view class="fandin" @click="getorder">返回订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score:5,
				id:''
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
		},
		onShow() {
		},
		methods: {
			getorder(){
				uni.switchTab({ url: '/pages/tabbar/ClientOrder' })
			},
			async getpjia(){
				//添加评价
				
				let res = await this.$u.api.addEvaluate({
					id:this.id,
					type:1,//类型 1评价员工 2评价老板
					score:this.score
				});
				this.$u.toast("提交成功");
				let that = this
				setTimeout(() => {
					that.getorder()
				}, 1500);
				

			},
			getpfen(e){
				this.score = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.pjie{
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		width: 100%;
		margin-top: 30rpx;

		.pjname{
			display: block;
			font-weight: bold;
			font-size: 28rpx;
			color: #111111;
		}
	}
	.fandin{
		width: 100%;
		height: 90rpx;
		background: rgba(238, 238, 238, 1);
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		margin-top: 40rpx;
	}
	
	.content{
		background-color: #f5f5f5;
		padding: 60rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.img_cg{
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}
		.jname{
			font-weight: 500;
			font-size: 40rpx;
			color: #111111;
		}
		.zhuyi{
			background: #F5F5F5;
			border-radius: 20rpx;
			padding: 30rpx;
			width: 100%;
			margin: 40rpx 0 60rpx;
			.zhuname{
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
			}
			.ms{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				display: block;
				margin-top: 8rpx;
			}
		}
		.zshou{
			width: 100%;
			height: 90rpx;
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 40rpx;
		}
	}

	.ohead{
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		padding: 20rpx;
		background: #fff;
		border-radius: 30rpx;
		// margin: 30rpx 30rpx 0;
		margin-top: 30rpx;
		width: 100%;
		.icon_jf{
			width: 87rpx;
			height: 87rpx;
			margin-right: 20rpx;

		}
	}
	.yijie{
		position: absolute;
		right: 0;
		top: 0;
		background: #FFE8E3;
		border-radius: 0rpx 30rpx 0rpx 30rpx;
		padding: 4rpx 20rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FF5F40;
	}
	.yinav{
		flex: 1;
		display: flex;
		flex-direction: column;
		.name{
			font-weight: 800;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-bottom: 10rpx;
		}
		.jienav{
			display: flex;
			flex-direction: row;
			align-items: center;
			.bq{
				padding: 2rpx 10rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin-right: 15rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.sxiao{
				background: #FFF5E9;
			}
			.icon_bz_s{
				width: 25rpx;
				height: 25rpx;
				margin-right: 5rpx;
			}
			.bname{
				font-weight: 500;
				font-size: 24rpx;
				color: #B97216;
			}
			.icon_ck_s{
				width: 24rpx;
				height: 24rpx;
			}
			.xq{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				text{
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
				}
				.icon_gd{
					width: 24rpx;
					height: 24rpx;
					margin-left: 5rpx;
				}
			}


		}
		
	}
	.bqview{
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 30rpx 30rpx 30rpx;
		padding: 30rpx;
		width: 100%;
		.bqtit{
			font-weight: bold;
			font-size: 28rpx;
			color: #111111;
			display: block;
			
		}
		.phead{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 50rpx;
		}
		.tipj{
			margin-left: auto;
			font-weight: 500;
			font-size: 28rpx;
			color: #FF6B3E;
		}
		.bqitems{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.bqone{
				width: 68rpx;
				height: 68rpx;
			}
			.items{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text{
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
